<template>
    <div id="partner">
        <HeaderBg>
            <Headers :title="$t('partner.title')"/>
        </HeaderBg>
        <div v-if="listDatas.length" class="open-total">{{$t('partner.openTotal')}}{{openTotal}}</div>
        <ul v-if="listDatas.length">
            <li v-for="(item,index) in listDatas" :key="index">
                <div class="avatar_star">
                    <div class="avatar">
                        <img :src="item.avatar" alt="">
                    </div>
                    <div class="star">
                        <span v-for="(icon,key) in item.star" :key="key">
                            <img src="../../../assets/blue_star.png" alt="">
                        </span>
                    </div>
                </div>
                <div class="nick_name">
                    <p>{{item.nick_name}}</p>
                    <p class="fontStyle">{{item.assets}}</p>
                </div>
                <div class="status_totalYj">
                    <p :style="`color:${item.color};`">{{item.status}}</p>
                    <p>{{item.totalYJ}}</p>
                </div>
            </li>
        </ul>
        <div class="noLength" v-if="!listDatas.length">
            <img src="../../../assets/null.png" alt>
            <p>{{$t("oil.nullStatus")}}</p>
      </div>
    </div>
</template>

<script>
import HeaderBg from 'components/HeaderBg'
import { setTimeout } from 'timers';
    export default {
        name:'partner',
        data () {
            return {
                openTotal:12345,
                listDatas:[]
            }
        },
        components:{
            HeaderBg
        },
        mounted() {
            setTimeout(() => {
                this.listDatas = [
                    {
                        avatar:require('assets/defaultAvatar.png'),
                        star:0,
                        nick_name:'463961434@qq.com',
                        assets:this.$t('partner.assetsJE') + '0.00000',
                        status:this.$t('partner.statusClose'),
                        totalYJ:this.$t('partner.totalYj') + 12345,
                        color:'#F55685'
                    },
                    {
                        avatar:require('assets/defaultAvatar.png'),
                        star:3,
                        nick_name:'463961434@qq.com',
                        assets:this.$t('partner.assetsJE') + '0.00000',
                        status:this.$t('partner.statusOpen'),
                        totalYJ:this.$t('partner.totalYj') + 12345,
                        color:'#01F8EF'
                    },
                    {
                        avatar:require('assets/defaultAvatar.png'),
                        star:3,
                        nick_name:'463961434@qq.com',
                        assets:this.$t('partner.assetsJE') + '0.00000',
                        status:this.$t('partner.statusOpen'),
                        totalYJ:this.$t('partner.totalYj') + 12345,
                        color:'#01F8EF'
                    },
                    {
                        avatar:require('assets/defaultAvatar.png'),
                        star:3,
                        nick_name:'463961434@qq.com',
                        assets:this.$t('partner.assetsJE') + '0.00000',
                        status:this.$t('partner.statusOpen'),
                        totalYJ:this.$t('partner.totalYj') + 12345,
                        color:'#01F8EF'
                    },
                    {
                        avatar:require('assets/defaultAvatar.png'),
                        star:1,
                        nick_name:'463961434@qq.com',
                        assets:this.$t('partner.assetsJE') + '0.00000',
                        status:this.$t('partner.statusOpen'),
                        totalYJ:this.$t('partner.totalYj') + 12345,
                        color:'#01F8EF'
                    }
                ]
            }, 3000)
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#partner
    positCenter(0, 0, 0, 0, 0, 0)
    width 100%
    background-color $bodyBg
    .open-total
        margin rem(106) 0 rem(18)
        text-align right
        box-sizing border-box
        padding-right rem(20)
        font-size rem(14)
        color $tabBarActive
    ul
        li
            display flex
            justify-content space-between
            align-items center
            box-sizing border-box
            padding 0 rem(20) 0 rem(26)
            height rem(69)
            background $listBg
            margin-bottom rem(6)
            .avatar_star
                .avatar
                    width rem(25)
                    height rem(25)
                    margin 0 auto
                    img
                        width 100%
                        height 100%
                        object-fit contain
                .star
                    margin-top rem(6)
                    span
                        display inline-block
                        width rem(10)
                        height rem(10)
                        margin-right rem(2)
                        img
                            width 100%
                            height 100%
                            object-fit contain
            .nick_name
                color $fontColor
                text-align left
                line-height rem(18)
                .fontStyle
                    color $tabBarColor
            .status_totalYj
                text-align right
                display flex
                flex-direction column
                justify-content center
                color $fontColor
                p
                    line-height rem(20)
    .noLength
      positCenter(50%, 50%, auto, 0, -50%, -50%)
      img
        width rem(37)
        height rem(41)
      p
        font-size rem(14)
        margin-top rem(4)
        color $tabBarColor
</style>
